import { Card } from "antd";
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input } from 'antd';
import { useNavigate } from "react-router-dom";
import { getloginAPI } from "./dom/httpAPI";

type resTS = {
    data?: object[],
    code?: number,
    message?: string,

}
export default function Login() {
    const navigate = useNavigate()
    const onFinish = async (values: any) => {
        console.log('Received values of form: ', values);
        let res: resTS = await getloginAPI(values)
        if (res.code == 200) {
            alert("登录成功，已为您跳转到首页")
            localStorage.setItem("token", values.username)
            navigate("/home")
        } else {
            alert("账户或密码错误，请重试哦")
        }

    };
    return (
        <div>
            <Card title="登录" style={{ width: 300, margin: "100px auto" }}>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: 'Please input your Username!' }]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: 'Please input your Password!' }]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="Password"
                        />
                    </Form.Item>


                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>

                    </Form.Item>
                </Form>
            </Card>

        </div>
    )
}
